
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>Connection - jsplumb API documentation</title>

    

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link rel="stylesheet" href="../../css/main.css">
    <link rel="stylesheet" href="../../css/jsplumb-doc.css">

    <!-- yuidoc -->
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">

    <link rel="stylesheet" href="../../css/external/cssgrids-min.css">
    <link rel="stylesheet" href="../../css/external/prettify-min.css">

    <link rel="shortcut icon" type="image/png" href="../../img/favicon.png">
    <script src="https://yui-s.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
    <style>
        #doc {
            text-align:left;
            margin-top:44px;
        }
    </style>
</head>
<body class="yui3-skin-sam">

    <div class="navbar navbar-top navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>

            <a class="navbar-brand" href="/"><img src="../../img/logo-medium-jsplumb.png"></a>
            <div class="community"></div>

        </div>

        <div class="navbar-collapse collapse nav-wrapper">
            <ul class="nav navbar-nav">
                <li><a href="../../">DEMOS</a></li>
                <li><a href="../../doc/home.html">DOCS</a></li>
                <li><a href="../../apidocs/index.html">API</a></li>
                <li><a href="../../download">DOWNLOAD</a></li>
                <li><a href="http://beta.jsplumbtoolkit.com/contact.html">CONTACT</a></li>
                <li><a href="https://blog.jsplumbtoolkit.com">BLOG</a></li>

            </ul>

            <div class="social-nav hidden-xs">
                <a href="http://twitter.com/jsplumblib" class="link"><span class="icon-twitter"></span></a>
                <a href="http://github.com/sporritt/jsplumb/" class="link"><span class="icon-github"></span></a>
                <a href="http://www.linkedin.com/company/jsplumb" class="link"><span class="icon-linkedin"></span></a>

            </div>
        </div><!--/.nav-collapse -->
    </div>
</div>

    <div class="container">
        <div class="row">
            <div id="doc">
    <div id="bd" class="yui3-g">
        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="../classes/Anchors.Assign.html">Anchors.Assign</a></li>
            
                <li><a href="../classes/Anchors.AutoDefault.html">Anchors.AutoDefault</a></li>
            
                <li><a href="../classes/Anchors.Bottom.html">Anchors.Bottom</a></li>
            
                <li><a href="../classes/Anchors.BottomCenter.html">Anchors.BottomCenter</a></li>
            
                <li><a href="../classes/Anchors.BottomLeft.html">Anchors.BottomLeft</a></li>
            
                <li><a href="../classes/Anchors.BottomRight.html">Anchors.BottomRight</a></li>
            
                <li><a href="../classes/Anchors.Center.html">Anchors.Center</a></li>
            
                <li><a href="../classes/Anchors.Continuous.html">Anchors.Continuous</a></li>
            
                <li><a href="../classes/Anchors.ContinuousBottom.html">Anchors.ContinuousBottom</a></li>
            
                <li><a href="../classes/Anchors.ContinuousLeft.html">Anchors.ContinuousLeft</a></li>
            
                <li><a href="../classes/Anchors.ContinuousRight.html">Anchors.ContinuousRight</a></li>
            
                <li><a href="../classes/Anchors.ContinuousTop.html">Anchors.ContinuousTop</a></li>
            
                <li><a href="../classes/Anchors.Left.html">Anchors.Left</a></li>
            
                <li><a href="../classes/Anchors.LeftMiddle.html">Anchors.LeftMiddle</a></li>
            
                <li><a href="../classes/Anchors.Perimeter.html">Anchors.Perimeter</a></li>
            
                <li><a href="../classes/Anchors.Right.html">Anchors.Right</a></li>
            
                <li><a href="../classes/Anchors.RightMiddle.html">Anchors.RightMiddle</a></li>
            
                <li><a href="../classes/Anchors.Top.html">Anchors.Top</a></li>
            
                <li><a href="../classes/Anchors.TopCenter.html">Anchors.TopCenter</a></li>
            
                <li><a href="../classes/Anchors.TopLeft.html">Anchors.TopLeft</a></li>
            
                <li><a href="../classes/Anchors.TopRight.html">Anchors.TopRight</a></li>
            
                <li><a href="../classes/Connection.html">Connection</a></li>
            
                <li><a href="../classes/Connector.html">Connector</a></li>
            
                <li><a href="../classes/Connectors.Bezier.html">Connectors.Bezier</a></li>
            
                <li><a href="../classes/Connectors.Flowchart.html">Connectors.Flowchart</a></li>
            
                <li><a href="../classes/Connectors.StateMachine.html">Connectors.StateMachine</a></li>
            
                <li><a href="../classes/Connectors.Straight.html">Connectors.Straight</a></li>
            
                <li><a href="../classes/Endpoint.html">Endpoint</a></li>
            
                <li><a href="../classes/Endpoints.Blank.html">Endpoints.Blank</a></li>
            
                <li><a href="../classes/Endpoints.Dot.html">Endpoints.Dot</a></li>
            
                <li><a href="../classes/Endpoints.Image.html">Endpoints.Image</a></li>
            
                <li><a href="../classes/Endpoints.Rectangle.html">Endpoints.Rectangle</a></li>
            
                <li><a href="../classes/jsPlumb.html">jsPlumb</a></li>
            
                <li><a href="../classes/jsPlumbInstance.html">jsPlumbInstance</a></li>
            
                <li><a href="../classes/jsPlumbUIComponent.html">jsPlumbUIComponent</a></li>
            
                <li><a href="../classes/jsPlumbUtil.html">jsPlumbUtil</a></li>
            
                <li><a href="../classes/jsPlumbUtil.EventGenerator.html">jsPlumbUtil.EventGenerator</a></li>
            
                <li><a href="../classes/Overlay.html">Overlay</a></li>
            
                <li><a href="../classes/OverlayCapableJsPlumbUIComponent.html">OverlayCapableJsPlumbUIComponent</a></li>
            
                <li><a href="../classes/Overlays.Arrow.html">Overlays.Arrow</a></li>
            
                <li><a href="../classes/Overlays.Diamond.html">Overlays.Diamond</a></li>
            
                <li><a href="../classes/Overlays.Label.html">Overlays.Label</a></li>
            
                <li><a href="../classes/Overlays.PlainArrow.html">Overlays.PlainArrow</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1>Connection Class</h1>
<div class="box meta">
    

    
        <div class="extends">
            Extends <a href="../classes/OverlayCapableJsPlumbUIComponent.html" class="crosslink">OverlayCapableJsPlumbUIComponent</a>
        </div>
    

    
        <div class="foundat">
            Defined in: <a href="../files/doc_api_connection-api.js.html#l1"><code>doc&#x2F;api&#x2F;connection-api.js:1</code></a>
        </div>
    

    

    
</div>



<div class="box intro">
    <p>Models a Connection.  A Connection consists of two Endpoints (each of which belongs to some DOM element), a Connector (the actual path inscribed by the
Connection), and zero or more Overlays.</p>

</div>



<div id="classdocs" class="tabview">
    <ul class="api-class-tabs">
        <li class="api-class-tab index"><a href="#index">Index</a></li>

        
            <li class="api-class-tab methods"><a href="#methods">Methods</a></li>
        
        
            <li class="api-class-tab properties"><a href="#properties">Properties</a></li>
        
        
        
    </ul>

    <div>
        <div id="index" class="api-class-tabpanel index">
            <h2 class="off-left">Item Index</h2>

            
                <div class="index-section methods">
                    <h3>Methods</h3>

                    <ul class="index-list methods extends">
                        
                            <li class="index-item method inherited">
                                <a href="#method_addClass">addClass</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_addOverlay">addOverlay</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_addType">addType</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_bind">bind</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_cleanupListeners">cleanupListeners</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_clearTypes">clearTypes</a>

                                
                                
                            </li>
                        
                            <li class="index-item method private inherited">
                                <a href="#method_fire">fire</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_getConnector">getConnector</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_getData">getData</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_getLabel">getLabel</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_getLabelOverlay">getLabelOverlay</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_getOverlay">getOverlay</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_getOverlays">getOverlays</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_getParameter">getParameter</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_getParameters">getParameters</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_getType">getType</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_getUuids">getUuids</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_hasType">hasType</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_hideOverlay">hideOverlay</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_hideOverlays">hideOverlays</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_isDetachable">isDetachable</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_isEditable">isEditable</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_isHover">isHover</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_isReattach">isReattach</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_isSuspendEvents">isSuspendEvents</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_isVisible">isVisible</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_jsPlumbUtil.replace">jsPlumbUtil.replace</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_reapplyTypes">reapplyTypes</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_removeAllOverlays">removeAllOverlays</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_removeClass">removeClass</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_removeOverlay">removeOverlay</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_removeOverlays">removeOverlays</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_removeType">removeType</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_setConnector">setConnector</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_setDetachable">setDetachable</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_setEditable">setEditable</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_setHover">setHover</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_setHoverPaintStyle">setHoverPaintStyle</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_setLabel">setLabel</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_setPaintStyle">setPaintStyle</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_setParameter">setParameter</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_setParameters">setParameters</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_setReattach">setReattach</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_setSuspendEvents">setSuspendEvents</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_setType">setType</a>

                                
                                
                            </li>
                        
                            <li class="index-item method">
                                <a href="#method_setVisible">setVisible</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_showOverlay">showOverlay</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_showOverlays">showOverlays</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_toggleType">toggleType</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_unbind">unbind</a>

                                
                                
                            </li>
                        
                            <li class="index-item method inherited">
                                <a href="#method_updateClasses">updateClasses</a>

                                
                                
                            </li>
                        
                    </ul>
                </div>
            

            
                <div class="index-section properties">
                    <h3>Properties</h3>

                    <ul class="index-list properties extends">
                        
                            <li class="index-item property">
                                <a href="#property_endpoints">endpoints</a>

                                
                                
                            </li>
                        
                            <li class="index-item property inherited">
                                <a href="#property_overlays">overlays</a>

                                
                                
                            </li>
                        
                            <li class="index-item property">
                                <a href="#property_scope">scope</a>

                                
                                
                            </li>
                        
                            <li class="index-item property">
                                <a href="#property_source">source</a>

                                
                                
                            </li>
                        
                            <li class="index-item property">
                                <a href="#property_sourceId">sourceId</a>

                                
                                
                            </li>
                        
                            <li class="index-item property">
                                <a href="#property_target">target</a>

                                
                                
                            </li>
                        
                            <li class="index-item property">
                                <a href="#property_targetId">targetId</a>

                                
                                
                            </li>
                        
                    </ul>
                </div>
            

            

            
        </div>

        
            <div id="methods" class="api-class-tabpanel">
                <h2 class="off-left">Methods</h2>

                
                    <div id="method_addClass" class="method item inherited">
    <h3 class="name"><code>addClass</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>class</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/JsPlumbUIComponent.html#method_addClass">jsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_uicomponent.js.html#l44"><code>doc&#x2F;api&#x2F;uicomponent.js:44</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Adds a class or some classes to the visual elements for the given component.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">class</code>
                        <span class="type">String</span>
                    

                    

                    <div class="param-description">
                        <p>The class(es) to add. The values are  appended as given, meaning you can supply a space separated string of several classes if you wish.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_addOverlay" class="method item inherited">
    <h3 class="name"><code>addOverlay</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>overlaySpec</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/OverlayCapableJsPlumbUIComponent.html#method_addOverlay">OverlayCapableJsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_overlaycomponent.js.html#l90"><code>doc&#x2F;api&#x2F;overlaycomponent.js:90</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Adds an Overlay to the component.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">overlaySpec</code>
                        <span class="type">Object</span>
                    

                    

                    <div class="param-description">
                        <p>Specification of the Overlay to add.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_addType" class="method item inherited">
    <h3 class="name"><code>addType</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>typeId</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code class="optional">[params]</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code class="optional">[doNotRepaint=false]</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/JsPlumbUIComponent.html#method_addType">jsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_uicomponent.js.html#l99"><code>doc&#x2F;api&#x2F;uicomponent.js:99</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Adds a type to the component. Note this is distinct from {@link #setType}, which overrides all current types - this function just adds a type to the existing list.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">typeId</code>
                        <span class="type">String</span>
                    

                    

                    <div class="param-description">
                        <p>Id of the type to add.</p>

                    </div>

                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name optional">[params]</code>
                        <span class="type">Object</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>Optional params to use when applying the type.</p>

                    </div>

                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name optional">[doNotRepaint=false]</code>
                        <span class="type">Boolean</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>Tells jsPlumb not to repaint after adding the type.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_bind" class="method item inherited">
    <h3 class="name"><code>bind</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>event</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code>listener</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code class="optional">[insertAtStart=false]</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/jsPlumbUtil.EventGenerator.html#method_bind">jsPlumbUtil.EventGenerator</a>:
            
        
        
        <a href="../files/doc_api_util-api.js.html#l89"><code>doc&#x2F;api&#x2F;util-api.js:89</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Binds a listener to one or more events.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">event</code>
                        <span class="type">String | String</span>
                    

                    

                    <div class="param-description">
                        <p>Name(s) of the event(s) to bind to. Note that if you provide multiple event names they all are bound with the same function.</p>

                    </div>

                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name">listener</code>
                        <span class="type">Function</span>
                    

                    

                    <div class="param-description">
                        <p>Function to execute.</p>

                    </div>

                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name optional">[insertAtStart=false]</code>
                        <span class="type">Boolean</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>Whether or not to insert this listener at the start of the listener list, so it is fired before the other currently registered listeners.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_cleanupListeners" class="method item inherited">
    <h3 class="name"><code>cleanupListeners</code></h3>

    
        <span class="paren">()</span>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/jsPlumbUtil.EventGenerator.html#method_cleanupListeners">jsPlumbUtil.EventGenerator</a>:
            
        
        
        <a href="../files/doc_api_util-api.js.html#l126"><code>doc&#x2F;api&#x2F;util-api.js:126</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Removes all listeners.</p>

    </div>

    

    

    
</div>

                
                    <div id="method_clearTypes" class="method item inherited">
    <h3 class="name"><code>clearTypes</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code class="optional">[doNotRepaint=false]</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/JsPlumbUIComponent.html#method_clearTypes">jsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_uicomponent.js.html#l79"><code>doc&#x2F;api&#x2F;uicomponent.js:79</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Clears all <code>types</code> for a given component.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name optional">[doNotRepaint=false]</code>
                        <span class="type">Boolean</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>Tells jsPlumb not to repaint after clearing the types.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_fire" class="method item private inherited">
    <h3 class="name"><code>fire</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>event</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code>value</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code>originalEvent</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    
        <span class="flag private">private</span>
    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/jsPlumbUtil.EventGenerator.html#method_fire">jsPlumbUtil.EventGenerator</a>:
            
        
        
        <a href="../files/doc_api_util-api.js.html#l97"><code>doc&#x2F;api&#x2F;util-api.js:97</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Fires an update for the given event.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">event</code>
                        <span class="type">String</span>
                    

                    

                    <div class="param-description">
                        <p>Event to fire</p>

                    </div>

                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name">value</code>
                        <span class="type">Object</span>
                    

                    

                    <div class="param-description">
                        <p>Value to pass to the event listener(s).</p>

                    </div>

                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name">originalEvent</code>
                        <span class="type">Event</span>
                    

                    

                    <div class="param-description">
                        <p>The original event from the browser</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_getConnector" class="method item">
    <h3 class="name"><code>getConnector</code></h3>

    
        <span class="paren">()</span>
    

    
        <span class="returns-inline">
            <span class="type"><a href="../classes/Connector.html" class="crosslink">Connector</a></span>
        </span>
    

    

    

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/doc_api_connection-api.js.html#l74"><code>doc&#x2F;api&#x2F;connection-api.js:74</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Gets the underlying Connector for this Connection. A Connector is the path the user sees between the two Endpoints.</p>

    </div>

    

    
        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                
                    
                        <span class="type"><a href="../classes/Connector.html" class="crosslink">Connector</a></span>:
                    
                    <p>The current Connector.</p>

                
            </div>
        </div>
    

    
</div>

                
                    <div id="method_getData" class="method item">
    <h3 class="name"><code>getData</code></h3>

    
        <span class="paren">()</span>
    

    
        <span class="returns-inline">
            <span class="type">Object</span>
        </span>
    

    

    

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/doc_api_connection-api.js.html#l138"><code>doc&#x2F;api&#x2F;connection-api.js:138</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Returns the data provided (if any) to this object for populating its types.</p>

    </div>

    

    
        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                
                    
                        <span class="type">Object</span>:
                    
                    <p>Data, or null.</p>

                
            </div>
        </div>
    

    
</div>

                
                    <div id="method_getLabel" class="method item inherited">
    <h3 class="name"><code>getLabel</code></h3>

    
        <span class="paren">()</span>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/OverlayCapableJsPlumbUIComponent.html#method_getLabel">OverlayCapableJsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_overlaycomponent.js.html#l13"><code>doc&#x2F;api&#x2F;overlaycomponent.js:13</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Returns the label text for this component (or a function if you are labelling with a function).
This does not return the overlay itself; this is a convenience method which is a pair with
<code>setLabel</code>; together they allow you to add and access a Label Overlay without having to create the
Overlay object itself.  For access to the underlying label overlay that jsPlumb has created,
use <code>getLabelOverlay</code>.</p>

    </div>

    

    

    
</div>

                
                    <div id="method_getLabelOverlay" class="method item inherited">
    <h3 class="name"><code>getLabelOverlay</code></h3>

    
        <span class="paren">()</span>
    

    
        <span class="returns-inline">
            <span class="type"><a href="../classes/Overlay.html" class="crosslink">Overlay</a></span>
        </span>
    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/OverlayCapableJsPlumbUIComponent.html#method_getLabelOverlay">OverlayCapableJsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_overlaycomponent.js.html#l24"><code>doc&#x2F;api&#x2F;overlaycomponent.js:24</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        
    </div>

    

    
        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                
                    
                        <span class="type"><a href="../classes/Overlay.html" class="crosslink">Overlay</a></span>:
                    
                    <p>The underlying internal label overlay, which will exist if you specified a label on
a <code>connect</code> call, or have called <code>setLabel</code> at any stage. Otherwise it will be null.</p>

                
            </div>
        </div>
    

    
</div>

                
                    <div id="method_getOverlay" class="method item inherited">
    <h3 class="name"><code>getOverlay</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>overlayId</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    
        <span class="returns-inline">
            <span class="type"><a href="../classes/Overlay.html" class="crosslink">Overlay</a></span>
        </span>
    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/OverlayCapableJsPlumbUIComponent.html#method_getOverlay">OverlayCapableJsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_overlaycomponent.js.html#l31"><code>doc&#x2F;api&#x2F;overlaycomponent.js:31</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Gets an overlay, by ID. Note: <strong>by ID</strong>.  You would pass an &#39;id&#39; parameter
in to the Overlay&#39;s constructor arguments, and then use that to retrieve it via this method.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">overlayId</code>
                        <span class="type">String</span>
                    

                    

                    <div class="param-description">
                        <p>Id of the overlay to retrieve.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    
        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                
                    
                        <span class="type"><a href="../classes/Overlay.html" class="crosslink">Overlay</a></span>:
                    
                    <p>The overlay stored against the given id, null if not found.</p>

                
            </div>
        </div>
    

    
</div>

                
                    <div id="method_getOverlays" class="method item inherited">
    <h3 class="name"><code>getOverlays</code></h3>

    
        <span class="paren">()</span>
    

    
        <span class="returns-inline">
            <span class="type">Array</span>
        </span>
    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/OverlayCapableJsPlumbUIComponent.html#method_getOverlays">OverlayCapableJsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_overlaycomponent.js.html#l39"><code>doc&#x2F;api&#x2F;overlaycomponent.js:39</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Gets all the overlays for this component.</p>

    </div>

    

    
        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                
                    
                        <span class="type">Array</span>:
                    
                    <p>List of the component&#39;s overlays.</p>

                
            </div>
        </div>
    

    
</div>

                
                    <div id="method_getParameter" class="method item inherited">
    <h3 class="name"><code>getParameter</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>name</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    
        <span class="returns-inline">
            <span class="type">Object</span>
        </span>
    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/JsPlumbUIComponent.html#method_getParameter">jsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_uicomponent.js.html#l16"><code>doc&#x2F;api&#x2F;uicomponent.js:16</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Gets a parameter from the component</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">name</code>
                        <span class="type">String</span>
                    

                    

                    <div class="param-description">
                        <p>Name of the parameter to get</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    
        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                
                    
                        <span class="type">Object</span>:
                    
                    <p>The given parameter&#39;s value, null if not found.</p>

                
            </div>
        </div>
    

    
</div>

                
                    <div id="method_getParameters" class="method item inherited">
    <h3 class="name"><code>getParameters</code></h3>

    
        <span class="paren">()</span>
    

    
        <span class="returns-inline">
            <span class="type">Object</span>
        </span>
    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/JsPlumbUIComponent.html#method_getParameters">jsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_uicomponent.js.html#l30"><code>doc&#x2F;api&#x2F;uicomponent.js:30</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Gets all parameters from the component. Note that you are given the actual parameters
object, not a copy, so you can alter their values directly, and if you hold the reference
to the parameters object you could cause a memory leak.</p>

    </div>

    

    
        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                
                    
                        <span class="type">Object</span>:
                    
                    <p>All of the component&#39;s parameters.</p>

                
            </div>
        </div>
    

    
</div>

                
                    <div id="method_getType" class="method item inherited">
    <h3 class="name"><code>getType</code></h3>

    
        <span class="paren">()</span>
    

    
        <span class="returns-inline">
            <span class="type">String</span>
        </span>
    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/JsPlumbUIComponent.html#method_getType">jsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_uicomponent.js.html#l73"><code>doc&#x2F;api&#x2F;uicomponent.js:73</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Gets the current type - or types - for this component.</p>

    </div>

    

    
        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                
                    
                        <span class="type">String</span>:
                    
                    <p>The current list of types, empty if none registered.</p>

                
            </div>
        </div>
    

    
</div>

                
                    <div id="method_getUuids" class="method item">
    <h3 class="name"><code>getUuids</code></h3>

    
        <span class="paren">()</span>
    

    
        <span class="returns-inline">
            <span class="type">String</span>
        </span>
    

    

    

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/doc_api_connection-api.js.html#l144"><code>doc&#x2F;api&#x2F;connection-api.js:144</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Gets the UUIDs of the two endpoints, if they are set.</p>

    </div>

    

    
        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                
                    
                        <span class="type">String</span>:
                    
                    <p>An array of [sourceUuid, targetUuid]. Either or both of these values may be null.</p>

                
            </div>
        </div>
    

    
</div>

                
                    <div id="method_hasType" class="method item inherited">
    <h3 class="name"><code>hasType</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>typeId</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    
        <span class="returns-inline">
            <span class="type">Boolean</span>
        </span>
    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/JsPlumbUIComponent.html#method_hasType">jsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_uicomponent.js.html#l92"><code>doc&#x2F;api&#x2F;uicomponent.js:92</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Returns whether or not the component currently has the given type.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">typeId</code>
                        <span class="type">String</span>
                    

                    

                    <div class="param-description">
                        <p>Id of the type to check for</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    
        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                
                    
                        <span class="type">Boolean</span>:
                    
                    <p>True if the component has the type, false if not.</p>

                
            </div>
        </div>
    

    
</div>

                
                    <div id="method_hideOverlay" class="method item inherited">
    <h3 class="name"><code>hideOverlay</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>overlayId</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/OverlayCapableJsPlumbUIComponent.html#method_hideOverlay">OverlayCapableJsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_overlaycomponent.js.html#l45"><code>doc&#x2F;api&#x2F;overlaycomponent.js:45</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Hides the overlay specified by the given id.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">overlayId</code>
                        <span class="type">String</span>
                    

                    

                    <div class="param-description">
                        <p>Id of the overlay to hide.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_hideOverlays" class="method item inherited">
    <h3 class="name"><code>hideOverlays</code></h3>

    
        <span class="paren">()</span>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/OverlayCapableJsPlumbUIComponent.html#method_hideOverlays">OverlayCapableJsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_overlaycomponent.js.html#l51"><code>doc&#x2F;api&#x2F;overlaycomponent.js:51</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Hides all Overlays for this component.</p>

    </div>

    

    

    
</div>

                
                    <div id="method_isDetachable" class="method item">
    <h3 class="name"><code>isDetachable</code></h3>

    
        <span class="paren">()</span>
    

    
        <span class="returns-inline">
            <span class="type">Boolean</span>
        </span>
    

    

    

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/doc_api_connection-api.js.html#l80"><code>doc&#x2F;api&#x2F;connection-api.js:80</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Returns whether or not this Connection can be detached from its target/source endpoint.  By default this
is false; use it in conjunction with the <code>reattach</code> parameter.</p>

    </div>

    

    
        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                
                    
                        <span class="type">Boolean</span>:
                    
                    <p>True if can be detached, false otherwise.</p>

                
            </div>
        </div>
    

    
</div>

                
                    <div id="method_isEditable" class="method item">
    <h3 class="name"><code>isEditable</code></h3>

    
        <span class="paren">()</span>
    

    
        <span class="returns-inline">
            <span class="type">Boolean</span>
        </span>
    

    

    

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/doc_api_connection-api.js.html#l87"><code>doc&#x2F;api&#x2F;connection-api.js:87</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Returns whether or not the Connection is editable.</p>

    </div>

    

    
        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                
                    
                        <span class="type">Boolean</span>:
                    
                    <p>True if editable, false if not.</p>

                
            </div>
        </div>
    

    
</div>

                
                    <div id="method_isHover" class="method item inherited">
    <h3 class="name"><code>isHover</code></h3>

    
        <span class="paren">()</span>
    

    
        <span class="returns-inline">
            <span class="type">Boolean</span>
        </span>
    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/JsPlumbUIComponent.html#method_isHover">jsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_uicomponent.js.html#l122"><code>doc&#x2F;api&#x2F;uicomponent.js:122</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Returns whether or not the object is currently in hover state</p>

    </div>

    

    
        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                
                    
                        <span class="type">Boolean</span>:
                    
                    <p>True if in hover state, false if not.</p>

                
            </div>
        </div>
    

    
</div>

                
                    <div id="method_isReattach" class="method item">
    <h3 class="name"><code>isReattach</code></h3>

    
        <span class="paren">()</span>
    

    
        <span class="returns-inline">
            <span class="type">Boolean</span>
        </span>
    

    

    

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/doc_api_connection-api.js.html#l93"><code>doc&#x2F;api&#x2F;connection-api.js:93</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Returns whether or not this Connection will be reattached after having been detached via the mouse and dropped.  By default this
is false; use it in conjunction with the <code>detachable</code> parameter.</p>

    </div>

    

    
        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                
                    
                        <span class="type">Boolean</span>:
                    
                    <p>True if will reattach, false if not.</p>

                
            </div>
        </div>
    

    
</div>

                
                    <div id="method_isSuspendEvents" class="method item inherited">
    <h3 class="name"><code>isSuspendEvents</code></h3>

    
        <span class="paren">()</span>
    

    
        <span class="returns-inline">
            <span class="type">Boolean</span>
        </span>
    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/jsPlumbUtil.EventGenerator.html#method_isSuspendEvents">jsPlumbUtil.EventGenerator</a>:
            
        
        
        <a href="../files/doc_api_util-api.js.html#l121"><code>doc&#x2F;api&#x2F;util-api.js:121</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Checks whether or not events are currently suspended.</p>

    </div>

    

    
        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                
                    
                        <span class="type">Boolean</span>:
                    
                    <p>True if events are suspended, false otherwise.</p>

                
            </div>
        </div>
    

    
</div>

                
                    <div id="method_isVisible" class="method item">
    <h3 class="name"><code>isVisible</code></h3>

    
        <span class="paren">()</span>
    

    
        <span class="returns-inline">
            <span class="type">Boolean</span>
        </span>
    

    

    

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/doc_api_connection-api.js.html#l100"><code>doc&#x2F;api&#x2F;connection-api.js:100</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Returns whether or not the Connection is currently visible.</p>

    </div>

    

    
        <div class="returns">
            <h4>Returns:</h4>

            <div class="returns-description">
                
                    
                        <span class="type">Boolean</span>:
                    
                    <p>True if visible, false if not.</p>

                
            </div>
        </div>
    

    
</div>

                
                    <div id="method_jsPlumbUtil.replace" class="method item inherited">
    <h3 class="name"><code>jsPlumbUtil.replace</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>inObj</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code>path</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code>value</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/jsPlumbUtil.EventGenerator.html#method_jsPlumbUtil.replace">jsPlumbUtil.EventGenerator</a>:
            
        
        
        <a href="../files/doc_api_util-api.js.html#l131"><code>doc&#x2F;api&#x2F;util-api.js:131</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Replaces values inside some JS object according to a given path spec. A path spec is a string in dotted notation,
with each component optionally declaring an array index. Some examples are:</p>
<p>foo.bar
foo.baz[2]
foo.qux[3].baz[3].shwee</p>
<p>The function fails gracefully if the path identifies a non-existent object.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">inObj</code>
                        <span class="type">Object</span>
                    

                    

                    <div class="param-description">
                        <p>Object to perform replacements inside.</p>

                    </div>

                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name">path</code>
                        <span class="type">String</span>
                    

                    

                    <div class="param-description">
                        <p>Path to use for replacements</p>

                    </div>

                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name">value</code>
                        <span class="type">Object</span>
                    

                    

                    <div class="param-description">
                        <p>Value to set.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_reapplyTypes" class="method item inherited">
    <h3 class="name"><code>reapplyTypes</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code class="optional">[params]</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/JsPlumbUIComponent.html#method_reapplyTypes">jsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_uicomponent.js.html#l85"><code>doc&#x2F;api&#x2F;uicomponent.js:85</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Reapplies the current list of types with the given (optional) parameters. See the 
jsPlumb documentation for a full discussion of types.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name optional">[params]</code>
                        <span class="type">Object</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>Optional params to use when reapplying types.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_removeAllOverlays" class="method item inherited">
    <h3 class="name"><code>removeAllOverlays</code></h3>

    
        <span class="paren">()</span>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/OverlayCapableJsPlumbUIComponent.html#method_removeAllOverlays">OverlayCapableJsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_overlaycomponent.js.html#l67"><code>doc&#x2F;api&#x2F;overlaycomponent.js:67</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Removes all overlays from the component, and then repaints.</p>

    </div>

    

    

    
</div>

                
                    <div id="method_removeClass" class="method item inherited">
    <h3 class="name"><code>removeClass</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>class</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/JsPlumbUIComponent.html#method_removeClass">jsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_uicomponent.js.html#l50"><code>doc&#x2F;api&#x2F;uicomponent.js:50</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Removes a class or some classes from the visual elements for the given component. You can supply a space separated string of several classes if you wish.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">class</code>
                        <span class="type">String</span>
                    

                    

                    <div class="param-description">
                        <p>The class(es) to remove.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_removeOverlay" class="method item inherited">
    <h3 class="name"><code>removeOverlay</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>overlayId</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/OverlayCapableJsPlumbUIComponent.html#method_removeOverlay">OverlayCapableJsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_overlaycomponent.js.html#l72"><code>doc&#x2F;api&#x2F;overlaycomponent.js:72</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Removes an overlay by ID.  Note: by ID.  this is a string you set in the overlay spec.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">overlayId</code>
                        <span class="type">String</span>
                    

                    

                    <div class="param-description">
                        <p>Id of the overlay to remove.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_removeOverlays" class="method item inherited">
    <h3 class="name"><code>removeOverlays</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>overlayIds</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/OverlayCapableJsPlumbUIComponent.html#method_removeOverlays">OverlayCapableJsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_overlaycomponent.js.html#l78"><code>doc&#x2F;api&#x2F;overlaycomponent.js:78</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Removes a set of overlays by ID.  Note: <strong>by ID</strong>.  This is a string you set in the overlay spec.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">overlayIds</code>
                        <span class="type">...String</span>
                    

                    

                    <div class="param-description">
                        <p>This function takes an arbitrary number of arguments, each of which is a single overlay id.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_removeType" class="method item inherited">
    <h3 class="name"><code>removeType</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>typeId</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code class="optional">[doNotRepaint=false]</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/JsPlumbUIComponent.html#method_removeType">jsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_uicomponent.js.html#l107"><code>doc&#x2F;api&#x2F;uicomponent.js:107</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Removes the given type from the component.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">typeId</code>
                        <span class="type">String</span>
                    

                    

                    <div class="param-description">
                        <p>Id of the type to remove.</p>

                    </div>

                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name optional">[doNotRepaint=false]</code>
                        <span class="type">Boolean</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>Tells jsPlumb not to repaint after removing the type.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_setConnector" class="method item">
    <h3 class="name"><code>setConnector</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>connector</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/doc_api_connection-api.js.html#l106"><code>doc&#x2F;api&#x2F;connection-api.js:106</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Sets the Connection&#39;s connector (eg <code>Bezier</code>, <code>Flowchart</code>, etc).  You pass a Connector definition into this method, the same
thing that you would set as the <code>connector</code> property on a <code>jsPlumb.connect</code> call.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">connector</code>
                        <span class="type">String | Object</span>
                    

                    

                    <div class="param-description">
                        <p>Connector definition. See jsPlumb documentation for a discussion.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_setDetachable" class="method item">
    <h3 class="name"><code>setDetachable</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>detachable</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/doc_api_connection-api.js.html#l113"><code>doc&#x2F;api&#x2F;connection-api.js:113</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Sets whether or not this connection is detachable.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">detachable</code>
                        <span class="type">Boolean</span>
                    

                    

                    <div class="param-description">
                        <p>Whether or not to set the Connection to be detachable.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_setEditable" class="method item">
    <h3 class="name"><code>setEditable</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>editable</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/doc_api_connection-api.js.html#l119"><code>doc&#x2F;api&#x2F;connection-api.js:119</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Sets whether or not the Connection is editable. This will only be honoured if
the underlying Connector is editable - not all types are.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">editable</code>
                        <span class="type">Boolean</span>
                    

                    

                    <div class="param-description">
                        <p>Whether or not to set the Connection to be editable.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_setHover" class="method item inherited">
    <h3 class="name"><code>setHover</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>hover</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code class="optional">[ignoreAttachedElements=false]</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/JsPlumbUIComponent.html#method_setHover">jsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_uicomponent.js.html#l141"><code>doc&#x2F;api&#x2F;uicomponent.js:141</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Sets/unsets the hover state of this component.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">hover</code>
                        <span class="type">Boolean</span>
                    

                    

                    <div class="param-description">
                        <p>Hover state boolean</p>

                    </div>

                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name optional">[ignoreAttachedElements=false]</code>
                        <span class="type">Boolean</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>If true, does not notify any attached elements of the change in hover state.  Used mostly by jsPlumb internally, to avoid infinite loops.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_setHoverPaintStyle" class="method item inherited">
    <h3 class="name"><code>setHoverPaintStyle</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>style</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code class="optional">[doNotRepaint]</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/JsPlumbUIComponent.html#method_setHoverPaintStyle">jsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_uicomponent.js.html#l128"><code>doc&#x2F;api&#x2F;uicomponent.js:128</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Sets the paint style to use when the mouse is hovering over the component. This is null by default.
The hover paint style is applied as extensions to the paintStyle; it does not entirely replace
it. This is because people will most likely want to change just one thing when hovering, say the
color for example, but leave the rest of the appearance the same.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">style</code>
                        <span class="type">Object</span>
                    

                    

                    <div class="param-description">
                        <p>Style to use when the mouse is hovering. The allowed values in this object originally come from valid values in an HTML5 canvas.</p>

                    </div>

                    
                        <ul class="params-list">
                            
                            <li class="param">
                                
                                    <code class="param-name optional">[fill]</code>
                                    <span class="type">String</span>
                                    <span class="flag optional" title="This parameter is optional.">optional</span>
                                

                                <div class="param-description">
                                    <p>Fill style, in valid CSS format (a hex code, name, or rgb value). Note that setting a <code>fill</code> on a Connector will cause the browser to fill the connector&#39;s path - probably not what you want.</p>

                                </div>

                                
                            </li>
                            
                            <li class="param">
                                
                                    <code class="param-name optional">[stroke]</code>
                                    <span class="type">String</span>
                                    <span class="flag optional" title="This parameter is optional.">optional</span>
                                

                                <div class="param-description">
                                    <p>Stroke style, in valid CSS format (a hex code, name, or rgb value). You can use <code>stroke</code> on Endpoints to define a border.</p>

                                </div>

                                
                            </li>
                            
                            <li class="param">
                                
                                    <code class="param-name optional">[strokeWidth]</code>
                                    <span class="type">Integer</span>
                                    <span class="flag optional" title="This parameter is optional.">optional</span>
                                

                                <div class="param-description">
                                    <p>Width of the stroked line (for Connectors this is the Connector itself; for Endpoints it is the outline)</p>

                                </div>

                                
                            </li>
                            
                        </ul>
                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name optional">[doNotRepaint]</code>
                        <span class="type">Boolean</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>If true, the component will not be repainted. Useful when setting things up initially.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_setLabel" class="method item inherited">
    <h3 class="name"><code>setLabel</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>label</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/OverlayCapableJsPlumbUIComponent.html#method_setLabel">OverlayCapableJsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_overlaycomponent.js.html#l84"><code>doc&#x2F;api&#x2F;overlaycomponent.js:84</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Sets the component&#39;s label.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">label</code>
                        <span class="type">String | Function | Object</span>
                    

                    

                    <div class="param-description">
                        <p>Label to set. May be a String, a Function that returns a String, or a params object containing { "label", "labelStyle", "location", "cssClass" }.  Note that this uses innerHTML on the label div, so keep that in mind if you need escaped HTML.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_setPaintStyle" class="method item inherited">
    <h3 class="name"><code>setPaintStyle</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>style</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code class="optional">[doNotRepaint=false]</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/JsPlumbUIComponent.html#method_setPaintStyle">jsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_uicomponent.js.html#l148"><code>doc&#x2F;api&#x2F;uicomponent.js:148</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Sets the component&#39;s paint style and then repaints the component.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">style</code>
                        <span class="type">Object</span>
                    

                    

                    <div class="param-description">
                        <p>Style to use. The allowed values in this object originally come from valid values in an HTML5 canvas.</p>

                    </div>

                    
                        <ul class="params-list">
                            
                            <li class="param">
                                
                                    <code class="param-name optional">[fill]</code>
                                    <span class="type">String</span>
                                    <span class="flag optional" title="This parameter is optional.">optional</span>
                                

                                <div class="param-description">
                                    <p>Fill style, in valid CSS format (a hex code, name, or rgb value). Note that setting a <code>fill</code> on a Connector will cause the browser to fill the connector&#39;s path - probably not what you want.</p>

                                </div>

                                
                            </li>
                            
                            <li class="param">
                                
                                    <code class="param-name optional">[stroke]</code>
                                    <span class="type">String</span>
                                    <span class="flag optional" title="This parameter is optional.">optional</span>
                                

                                <div class="param-description">
                                    <p>Stroke style, in valid CSS format (a hex code, name, or rgb value). You can use <code>stroke</code> on Endpoints to define a border.</p>

                                </div>

                                
                            </li>
                            
                            <li class="param">
                                
                                    <code class="param-name optional">[strokeWidth]</code>
                                    <span class="type">Integer</span>
                                    <span class="flag optional" title="This parameter is optional.">optional</span>
                                

                                <div class="param-description">
                                    <p>Width of the stroked line (for Connectors this is the Connector itself; for Endpoints it is the outline)</p>

                                </div>

                                
                            </li>
                            
                        </ul>
                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name optional">[doNotRepaint=false]</code>
                        <span class="type">Boolean</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>If true, the component will not be repainted.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_setParameter" class="method item inherited">
    <h3 class="name"><code>setParameter</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>name</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code>value</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/JsPlumbUIComponent.html#method_setParameter">jsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_uicomponent.js.html#l23"><code>doc&#x2F;api&#x2F;uicomponent.js:23</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Sets a parameter on the component</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">name</code>
                        <span class="type">String</span>
                    

                    

                    <div class="param-description">
                        <p>Name of the parameter to set</p>

                    </div>

                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name">value</code>
                        <span class="type">Object</span>
                    

                    

                    <div class="param-description">
                        <p>Value to set</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_setParameters" class="method item inherited">
    <h3 class="name"><code>setParameters</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>params</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/JsPlumbUIComponent.html#method_setParameters">jsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_uicomponent.js.html#l38"><code>doc&#x2F;api&#x2F;uicomponent.js:38</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Sets all parameters on the component.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">params</code>
                        <span class="type">Object</span>
                    

                    

                    <div class="param-description">
                        <p>Parameters to set.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_setReattach" class="method item">
    <h3 class="name"><code>setReattach</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>reattach</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/doc_api_connection-api.js.html#l126"><code>doc&#x2F;api&#x2F;connection-api.js:126</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Sets whether or not this connection will reattach after having been detached via the mouse and dropped.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">reattach</code>
                        <span class="type">Boolean</span>
                    

                    

                    <div class="param-description">
                        <p>Whether or not to set the Connection to reattach after it has been dropped in whitespace.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_setSuspendEvents" class="method item inherited">
    <h3 class="name"><code>setSuspendEvents</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>val</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/jsPlumbUtil.EventGenerator.html#method_setSuspendEvents">jsPlumbUtil.EventGenerator</a>:
            
        
        
        <a href="../files/doc_api_util-api.js.html#l116"><code>doc&#x2F;api&#x2F;util-api.js:116</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Sets whether or not events are suspended.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">val</code>
                        <span class="type">Boolean</span>
                    

                    

                    <div class="param-description">
                        <p>Whether or not to suspend events.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_setType" class="method item inherited">
    <h3 class="name"><code>setType</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>typeId</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code class="optional">[params]</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code class="optional">[doNotRepaint=false]</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/JsPlumbUIComponent.html#method_setType">jsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_uicomponent.js.html#l64"><code>doc&#x2F;api&#x2F;uicomponent.js:64</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>This function sets a <code>type</code> for the given component. It replaces all existing types. For a full discussion of the concept
of types, see the jsPlumb documentation.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">typeId</code>
                        <span class="type">String</span>
                    

                    

                    <div class="param-description">
                        <p>Id of the type to set.</p>

                    </div>

                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name optional">[params]</code>
                        <span class="type">Object</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>Optional parameter object to expand.</p>

                    </div>

                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name optional">[doNotRepaint=false]</code>
                        <span class="type">Boolean</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>Tells jsPlumb not to repaint after setting the type.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_setVisible" class="method item">
    <h3 class="name"><code>setVisible</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>visible</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/doc_api_connection-api.js.html#l132"><code>doc&#x2F;api&#x2F;connection-api.js:132</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Sets whether or not the Connection should be visible.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">visible</code>
                        <span class="type">Boolean</span>
                    

                    

                    <div class="param-description">
                        <p>Boolean indicating desired visible state.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_showOverlay" class="method item inherited">
    <h3 class="name"><code>showOverlay</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>overlayId</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/OverlayCapableJsPlumbUIComponent.html#method_showOverlay">OverlayCapableJsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_overlaycomponent.js.html#l57"><code>doc&#x2F;api&#x2F;overlaycomponent.js:57</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Shows the overlay specified by the given id.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">overlayId</code>
                        <span class="type">String</span>
                    

                    

                    <div class="param-description">
                        <p>Id of the overlay to show.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_showOverlays" class="method item inherited">
    <h3 class="name"><code>showOverlays</code></h3>

    
        <span class="paren">()</span>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/OverlayCapableJsPlumbUIComponent.html#method_showOverlays">OverlayCapableJsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_overlaycomponent.js.html#l63"><code>doc&#x2F;api&#x2F;overlaycomponent.js:63</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Shows all Overlays for this component.</p>

    </div>

    

    

    
</div>

                
                    <div id="method_toggleType" class="method item inherited">
    <h3 class="name"><code>toggleType</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code>typeId</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code class="optional">[params]</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code class="optional">[doNotRepaint=false]</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/JsPlumbUIComponent.html#method_toggleType">jsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_uicomponent.js.html#l114"><code>doc&#x2F;api&#x2F;uicomponent.js:114</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Toggles the given type on the component.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name">typeId</code>
                        <span class="type">String</span>
                    

                    

                    <div class="param-description">
                        <p>Id of the type to toggle.</p>

                    </div>

                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name optional">[params]</code>
                        <span class="type">Object</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>Optional params to use if the type is not currently set and jsPlumb applies it.</p>

                    </div>

                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name optional">[doNotRepaint=false]</code>
                        <span class="type">Boolean</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>Tells jsPlumb not to repaint after toggling the type.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_unbind" class="method item inherited">
    <h3 class="name"><code>unbind</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code class="optional">[eventOrListener]</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code class="optional">[listener]</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/jsPlumbUtil.EventGenerator.html#method_unbind">jsPlumbUtil.EventGenerator</a>:
            
        
        
        <a href="../files/doc_api_util-api.js.html#l106"><code>doc&#x2F;api&#x2F;util-api.js:106</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Clears either all listeners, or listeners for some specific event, or just some listener. You can call this method
with zero, one or two arguments: with zero arguments, all listeners are cleared. With one argument that is a string, all listeners for
the specified event type are cleared. With one argument that is a function, it is removed from the appropriate event list.
With two arguments, the first is an event type, and the second is a function to be unbound. In fact this is perhaps unnecessary
given that you can unbind a function just by passing it.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name optional">[eventOrListener]</code>
                        <span class="type">String | Function</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>If a string, constrains the clear to just listeners for the event identified by the string. If a Function, unbinds this function wherever it may have been bound.</p>

                    </div>

                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name optional">[listener]</code>
                        <span class="type">Function</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                        <p>If provided, removes just this listener for the given event.</p>

                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
                    <div id="method_updateClasses" class="method item inherited">
    <h3 class="name"><code>updateClasses</code></h3>

    
        <div class="args">
            <span class="paren">(</span><ul class="args-list inline commas">
            
                <li class="arg">
                    
                        <code class="optional">[classesToAdd]</code>
                    
                </li>
            
                <li class="arg">
                    
                        <code class="optional">[classesToRemove]</code>
                    
                </li>
            
            </ul><span class="paren">)</span>
        </div>
    

    

    

    

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/JsPlumbUIComponent.html#method_updateClasses">jsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_uicomponent.js.html#l56"><code>doc&#x2F;api&#x2F;uicomponent.js:56</code></a>
        
        </p>


        

        
    </div>

    <div class="description">
        <p>Adds/removes classes at the same time, which reduces the number of reflows that occur in the page. Either parameter
may be null but of course if you pass only a single parameter to this method then it will be taken to be classesToAdd.</p>

    </div>

    
        <div class="params">
            <h4>Parameters:</h4>

            <ul class="params-list">
            
                <li class="param">
                    
                        <code class="param-name optional">[classesToAdd]</code>
                        <span class="type">String | String</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                         
                    </div>

                    
                </li>
            
                <li class="param">
                    
                        <code class="param-name optional">[classesToRemove]</code>
                        <span class="type">String | String</span>
                        <span class="flag optional" title="This parameter is optional.">optional</span>
                    

                    

                    <div class="param-description">
                         
                    </div>

                    
                </li>
            
            </ul>
        </div>
    

    

    
</div>

                
            </div>
        

        
            <div id="properties" class="api-class-tabpanel">
                <h2 class="off-left">Properties</h2>

                
                    <div id="property_endpoints" class="property item">
    <h3 class="name"><code>endpoints</code></h3>
    <span class="type"><a href="../classes/Endpoint.html" class="crosslink">Endpoint[]</a></span>

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/doc_api_connection-api.js.html#l67"><code>doc&#x2F;api&#x2F;connection-api.js:67</code></a>
        
        </p>

        

        
    </div>

    <div class="description">
        <p>Array of Endpoints.</p>

    </div>

    

    

    
</div>

                
                    <div id="property_overlays" class="property item inherited">
    <h3 class="name"><code>overlays</code></h3>
    <span class="type">ListOverlay</span>

    

    

    

    

    <div class="meta">
        
            
                <p>Inherited from
                <a href="../classes/OverlayCapableJsPlumbUIComponent.html#property_overlays">OverlayCapableJsPlumbUIComponent</a>:
            
        
        
        <a href="../files/doc_api_overlaycomponent.js.html#l7"><code>doc&#x2F;api&#x2F;overlaycomponent.js:7</code></a>
        
        </p>

        

        
    </div>

    <div class="description">
        <p>List of Overlays for this component.</p>

    </div>

    

    

    
</div>

                
                    <div id="property_scope" class="property item">
    <h3 class="name"><code>scope</code></h3>
    <span class="type">String</span>

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/doc_api_connection-api.js.html#l48"><code>doc&#x2F;api&#x2F;connection-api.js:48</code></a>
        
        </p>

        

        
    </div>

    <div class="description">
        <p>Scope descriptor for the Connection.</p>

    </div>

    
        <p><strong>Default:</strong> &quot;_jsPlumb_Default_Scope&quot;</p>
    

    

    
</div>

                
                    <div id="property_source" class="property item">
    <h3 class="name"><code>source</code></h3>
    <span class="type">Element</span>

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/doc_api_connection-api.js.html#l55"><code>doc&#x2F;api&#x2F;connection-api.js:55</code></a>
        
        </p>

        

        
    </div>

    <div class="description">
        <p>Source element in the Connection.</p>

    </div>

    

    

    
</div>

                
                    <div id="property_sourceId" class="property item">
    <h3 class="name"><code>sourceId</code></h3>
    <span class="type">String</span>

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/doc_api_connection-api.js.html#l36"><code>doc&#x2F;api&#x2F;connection-api.js:36</code></a>
        
        </p>

        

        
    </div>

    <div class="description">
        <p>ID of the source element.</p>

    </div>

    

    

    
</div>

                
                    <div id="property_target" class="property item">
    <h3 class="name"><code>target</code></h3>
    <span class="type">Element</span>

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/doc_api_connection-api.js.html#l61"><code>doc&#x2F;api&#x2F;connection-api.js:61</code></a>
        
        </p>

        

        
    </div>

    <div class="description">
        <p>Target element in the Connection.</p>

    </div>

    

    

    
</div>

                
                    <div id="property_targetId" class="property item">
    <h3 class="name"><code>targetId</code></h3>
    <span class="type">String</span>

    

    

    

    

    <div class="meta">
        
            
                
                <p>
                
                Defined in
                
            
        
        
        <a href="../files/doc_api_connection-api.js.html#l42"><code>doc&#x2F;api&#x2F;connection-api.js:42</code></a>
        
        </p>

        

        
    </div>

    <div class="description">
        <p>ID of the target element.</p>

    </div>

    

    

    
</div>

                
            </div>
        

        

        
    </div>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

        </div>
    </div>
    
    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-49979015-1', 'auto');
    ga('send', 'pageview');

</script>

    
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
